/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-07 14:34:09
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-08 14:24:32
 */
import classnames from 'classnames'
import { useState } from 'react'
import Icon from '@/components/Icon/Icon'
import styles from './index.module.scss'
import { Toast } from 'antd-mobile'
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '@/types/store'
import { differenceBy } from 'lodash'
import { addChannel, delChannel, changeActive } from '@/store/actions/channel'

import { Channel } from '@/types/data'
type Props = {
  hide: () => void
}
const Channels = ({ hide }: Props) => {
  const dispatch = useDispatch()
  const { userChannels, activeIndex, allChannels } = useSelector((state: RootState) => state.channel)
  // console.log(userChannels, 3344);
  /* 获取可选频道 */
  // const optionChannel = allChannels.filter(item => {
  //   const index = userChannels.findIndex(item2 => item2.id === item.id)
  //   if (index !== -1) {
  //     return false
  //   } else {
  //     return true
  //   }
  // })
  // console.log(optionChannel, 77);
  const optionChannel = differenceBy(allChannels, userChannels, 'id')
  // console.log(optionChannel, 77);

  const changeEdit = () => {
    setIsEdit(!isEdit)
  }
  // 是否是编辑状态
  const [isEdit, setIsEdit] = useState(false)

  const onAddChannel = (item: Channel) => {
    dispatch(addChannel(item))
  }
  /* 删除 */
  const onDelChannel = (id: string) => {
    if (isEdit) {
      // //判断哪些不能删除
      // console.log(typeof activeIndex, typeof id, 7777);

      // let flag = ['0', String(activeIndex)].includes(id)
      // console.log(flag, 334455);
      if (id === '0') { // 推荐
        Toast.show('推荐不能删除')
        return false
      }
      if (id.toString() === activeIndex) {
        Toast.show('当前频道不能删除')
        return false
      }
      if (userChannels.length <= 4) {
        Toast.show('最少保留4个频道')
        return false
      }
      // if (flag) return false

      dispatch(delChannel(id))


    } else {
      hide()
      // 关闭
      dispatch(changeActive(id))

    }


  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={hide} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {isEdit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span className="channel-item-edit" onClick={changeEdit}>{!isEdit ? '编辑' : '完成'}</span>
          </div>
          {/* 这里放置我的频道 */}
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannels.map((item) => (
              <span
                onClick={() => onDelChannel(item.id.toString())}
                key={item.id}
                className={classnames(
                  'channel-list-item',
                  item.id.toString() === activeIndex.toString() ? 'selected' : ''
                )} >
                {item.name}
                {
                  !['0', String(activeIndex)].includes(item.id.toString()) && < Icon type="iconbtn_tag_close" />
                }
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>

          {/* 这里放置推荐频道 */}
          <div className="channel-list">
            {optionChannel.map((item) => (
              <span className="channel-list-item" key={item.id} onClick={() => onAddChannel(item)}>
                {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels